<ui:composition 
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">

    <script type="text/javascript" src="_js/menu.js"></script>
    <style>
        .wellcome {
            padding: 8px;
            margin-top: 5px;
        }
    </style>
    <script>
        $(document).ready(function() {

            //usuario logado
            if (JSON.parse(window.localStorage.getItem("session_usuario"))) {
                var usuario = JSON.parse(window.localStorage.getItem("session_usuario"));
                $("#loginbox").html('<a class="wellcome">Seja bem vindo ' + usuario.usuario + '</a>');
                $("#loginbox").append(' <input type="button" class="btn btn-danger wellcome" value="Sair" id="logout" />');
                if (usuario.grupoGrupoId.titulo === "Admin") {
                    $("#menu").append('<li id="admin"><a href="admin.xhtml">Admin</a></li>');
                }
                $("#menu").append('<li id="profile"><a href="profile.xhtml">Perfil</a></li>');
            }

            $("#logout").click(function() {
                localStorage.clear();
                location.reload();
            });

            $("#login").hide();

            $("#entrar").click(function() {
                $("#entrar").hide('fast');
                $("#login").show('fast');
            });

            $("#cancelar").click(function() {
                $("#login").hide('fast');
                $("#entrar").show('fast');
            });

            var url = location.pathname;
            var pagename = url.split('/');

            if (pagename[2] === "index.xhtml") {
                $("#home").addClass("active");
            }

            if (pagename[2] === "admin.xhtml") {
                $("#admin").addClass("active");
            }

            if (pagename[2] === "profile.xhtml") {
                $("#profile").addClass("active");
            }

            if (pagename[2] === "about.xhtml") {
                $("#about").addClass("active");
            }

            if (pagename[2] === "contact.xhtml") {
                $("#contact").addClass("active");
            }
        });
    </script>

    <div class="navbar navbar-inverse">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" href="index.xhtml">DarkSiders</a>
            </div>
            <div class="navbar-collapse collapse navbar-inverse-collapse">
                <ul class="nav navbar-nav" id="menu">
                    <li id="home"><a href="index.xhtml">Home</a></li>
                    <li id="about"><a href="about.xhtml">Sobre</a></li>
                    <li id="contact"><a href="contact.xhtml">Contato</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right" style="margin-right: 10px;" id="loginbox">
                    <li><a href="javascript:void(0);" id="entrar">Entrar</a></li>
                    <div id="login">
                        <input type="text" id="email" class="form-control" />
                        <input type="password" id="senha" class="form-control" />
                        <input type="button" class="btn btn-success" id="logar" value="Entrar" />
                        <input type="button" class="btn btn-danger" id="cancelar" value="Cancelar" />
                    </div>
                </ul>
            </div><!-- /.nav-collapse -->
        </div><!-- /.container -->
    </div><!-- /.navbar -->

</ui:composition>